import React from 'react'
import PropTypes from 'prop-types'
import { Carousel } from 'antd-mobile'

import {
  SwiperWrap
} from './StyledCookBook'

const Swiper = (props) => {

  const list = props.list.toJS()
  console.log(list);

  return (
    <SwiperWrap>
      <Carousel
        autoplay={true}
        infinite
      >
        {
          list.length > 0 && list.map(item => {
            return (
              <img onClick={props.onGotoDetail(item.name)} key={item.id} src={item.img} alt="" />
            )
          })
        }
      </Carousel>
    </SwiperWrap>
  )
}

/* Swiper.propTypes = {
  list: PropTypes.array
} */

export default Swiper

